<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue'
import gdglService from '@/api/gdgl'
import { TableItem } from '@/api/common'
import { TgjlListQueryResult } from '@/api/gdgl-dto'
import router from '@/router/index'
import tableAssembly from '@/components/queryTable/table/index.vue'
import tgjlDialog from '../dialogs/tgjl-dialog.vue'
import ajtgDialog from '../dialogs/ajtg-dialog.vue'
import tgspbDialog from '../dialogs/tgspb-dialog.vue'
import lcgzDialog from '@/views/gdgl/ajgd/dialogs/lcgz-dialog.vue'
import gddjbDialog from '@/components/queryTable/table/dialogs/gddjb-dialog.vue'

import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute } from 'vue-router'
interface Prop {
  paramsData: any
}

const props = defineProps<Prop>()
const route = useRoute()
// ref
const tgjlDialogRef = ref<InstanceType<typeof tgjlDialog>>()
const ajtgDialogRef = ref<InstanceType<typeof ajtgDialog>>()
const tgspbDialogRef = ref<InstanceType<typeof tgspbDialog>>()
// 生命周期
onMounted(() => {
  // 分页
  changePageNum(1)
})

// 更多条件查询 入参
const form = ref({
  pageSize: 20,
  pageNum: 1,
  filter: {
    ajlbbm: '',
    ajlxbm: '',
    ajmc: '',
    bmsah: '',
    cbbmbm: '',
    cbjcg: '',
    dh: '',
    gdjsrq: '',
    gdksrq: '',
    gdztdm: '',
    sfyspdm: '',
    sfzzajdm: '',
    tgztdm: '',
    tysah: '',
  },
})

// 检索参数与分页信息
const total = ref<any>(0)
const page = computed(() => {
  return {
    pageNum: form.value.pageNum,
    pageSize: form.value.pageSize,
    total: total.value,
  }
})

// 表格数据
const tableData = ref<TableItem>({
  data: [],
  titles: [
    {
      label: '案件名称',
      prop: 'ajmc',
      width: 300,
      custom: true,
      sort: true,
      dqfs: 'left',
    },
    { label: '申请人', prop: 'tgsqr', width: 130, dqfs: 'left' },
    { label: '申请日期', prop: 'tgsqrq', width: 130, dqfs: 'left' },
    { label: '退改类型', prop: 'tglx', width: 130, dqfs: 'left' },
    { label: '退改理由', prop: 'tgyy', width: 200, dqfs: 'left' },
    { label: '检察官审批', prop: 'jcshrxm', width: 130, dqfs: 'left' },
    { label: '部门审批', prop: 'bmshrxm', width: 130, dqfs: 'left' },
    { label: '院领导审批', prop: 'yldshrxm', width: 130, dqfs: 'left' },
    { label: '档案审批', prop: 'dayshrxm', width: 130, dqfs: 'left' },
    { label: '退改状态', prop: 'tgzt', width: 120, dqfs: 'left', shzt: true },
  ],
})

/*
 * 获取表格数据
 */
const getTableData = () => {
  const params = {
    gdjlbh: props.paramsData.gdjlbh,
  }
  gdglService
    .queryTgjlList(params)
    .then((res) => {
      tableData.value.data = res.data
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

/**
 * 表格选择
 */
const multipleSelection = ref<TgjlListQueryResult[]>([])
const selectionChange = (val: TgjlListQueryResult[]) => {
  multipleSelection.value = val
}

// 点击提交审核按钮
const submitProcess = () => {
  ElMessageBox.confirm('是否提交审核', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      shjg: '1',
      sftjsh: 'Y',
      gdxxList: multipleSelection.value.map((el) => ({
        ajbh: el.ajbh,
        bmsah: el.bmsah,
        tgjlbh: el.jlbh,
      })),
    }
    gdglService
      .saveTgshjl(params)
      .then(() => {
        ElMessage.success('提交成功')
        // 刷新数据
        getTableData()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

/*
 * 点击案件名称进入归档
 */
const checkRow = (row: any) => {
  router.push({
    path: '/jcgshxq',
    query: {
      ...row,
      route: props.paramsData.path,
      jumpFrom: 'tgjl',
    },
  })
}

/*
 * 打开流程跟踪弹窗
 */
const lcgzRef = ref()
const viewLcgz = (row: any) => {
  lcgzRef.value?.openDialog(row)
}

/*
 *打开退改详情弹框
 */
const openTgxqDialog = (data: object) => {
  tgjlDialogRef.value?.openDialog(data)
}

// 退改审批表切换
const openTgspbDialog = (row: any) => {
  tgspbDialogRef.value?.openDialog(row)
}

/*
 * 打开归档登记表弹框
 */
const gddjbDialogRef = ref<InstanceType<typeof gddjbDialog>>()
const openWsDialog = (arr: any) => {
  const gdbhList = arr.map((el: any) => el.gdbh)
  gddjbDialogRef.value!.openDialog(gdbhList, '归档登记表')
}

/**
 * 撤回申请
 */
const recallTgsh = () => {
  ElMessageBox.confirm('是否撤回申请', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    const params = {
      tgjls: multipleSelection.value.map((el) => ({ gdjlbh: el.gdjlbh, jlbh: el.jlbh })),
    }
    gdglService
      .recallTgsh(params)
      .then(() => {
        ElMessage.success('撤回成功')
        // 刷新数据
        getTableData()
      })
      .catch((err) => {
        !err.isError && ElMessage({ type: 'warning', message: err.message })
      })
  })
}

/*
 * 分页
 */
const changePageNum = async (val: number) => {
  form.value.pageNum = val
  getTableData()
}

/*
 * 分页
 */
const changeSize = (val: number) => {
  form.value.pageNum = 1
  form.value.pageSize = val
  getTableData()
}

/*
 * 打开案卷退改弹框
 */
const openAjtgDialog = (data: any) => {
  ajtgDialogRef.value!.openDialog(data, true)
}

const tableBoxRef = ref<InstanceType<typeof tableAssembly>>()

const rowClick = (row: any) => {
  if (multipleSelection.value?.includes(row)) {
    tableBoxRef.value?.refTable.toggleRowSelection(row, false)
  } else {
    tableBoxRef.value?.refTable.toggleRowSelection(row, true)
  }
}

// 刷新
const refresh = async () => {
  await changePageNum(1)
  ElMessage({ type: 'success', message: '刷新成功' })
}
</script>
<template>
  <div class="container">
    <div class="submit-list">
      <div class="submit-text">
        <span>退改记录列表</span>
      </div>
      <div>
        <button
          v-if="route.path !== '/gdyj'"
          class="btn_operation"
          @click="recallTgsh"
          :disabled="!multipleSelection.length"
        >
          <div class="btn-cx"></div>
          撤回申请
        </button>
        <button
          v-if="route.path !== '/gdyj'"
          class="btn_operation"
          @click="openAjtgDialog(multipleSelection[0])"
          :disabled="multipleSelection.length !== 1"
        >
          <div class="btn-back"></div>
          修改
        </button>
        <button
          v-if="route.path !== '/gdyj'"
          class="btn_operation"
          :disabled="!multipleSelection.length"
          @click="submitProcess"
        >
          <div class="btn-submitjtsh"></div>
          提交审核
        </button>
        <button class="btn_operation" @click="refresh">
          <div class="btn-refresh"></div>
          刷新
        </button>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table">
      <tableAssembly
        gnbm="ajgd-tgjl"
        ref="tableBoxRef"
        :tableData="tableData"
        :selectShow="true"
        :showExport="false"
        :getTableDataParam="page"
        @selectionChange="selectionChange"
        @changeCurrent="changePageNum"
        @changeSize="changeSize"
        @checkRow="checkRow"
        @rowClick="rowClick"
      >
        <template #myAction>
          <el-table-column label="操作" width="140" fixed="right">
            <template #default="scope">
              <div class="active-img" title="流程跟踪" @click="viewLcgz(scope.row)">
                <img src="@/assets/images/gdgztext.png" />
              </div>
              <div class="active-img" title="退改审批表" @click="openTgspbDialog(scope.row)">
                <img src="@/assets/images/tgspb.png" />
              </div>
              <div class="active-img" title="详情" @click="openTgxqDialog(scope.row)">
                <img src="@/assets/images/details.png" />
              </div>
              <div class="active-img" title="归档登记表" @click="openWsDialog([scope.row])">
                <img src="@/assets/images/gddjb.png" />
              </div>
            </template>
          </el-table-column>
        </template>
      </tableAssembly>
    </div>
    <!-- 案卷详情弹窗 -->
    <tgjlDialog ref="tgjlDialogRef"></tgjlDialog>
    <!-- 案件退改弹窗 -->
    <ajtg-dialog ref="ajtgDialogRef" @refresh="changePageNum(1)"></ajtg-dialog>
    <!-- 退改审批表弹窗 -->
    <tgspb-dialog ref="tgspbDialogRef"></tgspb-dialog>
    <!-- 流程跟踪 -->
    <lcgzDialog ref="lcgzRef" />
    <!--归档登记表-->
    <gddjb-dialog ref="gddjbDialogRef" />
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  .submit-list {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;

    .submit-text {
      height: 16px;
      line-height: 16px;
      margin-right: auto;
      color: #526a89;
      font-weight: bold;
      height: 100%;
      display: flex;
      align-items: flex-end;

      &::before {
        content: '';
        width: 4px;
        height: 16px;
        background-color: #006cff;
        margin-right: 6px;
      }
    }
  }

  .table {
    flex: 1;
    flex-shrink: 0;
    overflow: hidden;
  }

  .active-img {
    float: left;
    cursor: pointer;
  }
  .active-img + .active-img {
    margin-left: 10px;
  }
}
</style>
